@extends('layouts.mobile')

@section('title', '粗耕品牌计划')

@section('content')
    <div class="swiper-div" style="padding-top: 50%;">
        <div class="swiper" id="swiper">
            <ul class="swiper-wrapper">
                @foreach($focusImages as $img)
                    <li class="swiper-slide">
                        <a href="{{$img['url']}}">
                            <div class="bg bg-cover" style="background-image: url({{image_url($img['image'])}})"></div>
                        </a>
                    </li>
                @endforeach
            </ul>
            <div class="swiper-pagination"></div>
        </div>
    </div>
    <script type="text/javascript">
        (function(){
            var swiper = new Swiper('#swiper',
                {loop:true,pagination:'.swiper-pagination',autoplay:2500});
        })();
    </script>
    <div class="section-title">品牌推荐</div>
    <div class="brands">
        @foreach ($brands as $brand)
            <div class="item" data-link="{{mobile_shop_url(substr($brand['url'], 13))}}">
                <div class="bg bg-cover" style="background-image: url({{image_url($brand['image'])}})"></div>
            </div>
        @endforeach
    </div>
    <div class="section-title">附近商家</div>
    <div class="shop-list">
        <div class="shop-item" v-for="shop in shops">
            <div class="info">
                <div class="logo bg-cover" :style="{'background-image':'url('+shop.logo+')'}"></div>
                <div class="name">@{{ shop.shop_name }}</div>
                <div class="action">
                    <div class="button" v-on:click="viewShop(shop)">进店</div>
                </div>
            </div>
            <div class="items">
                <div class="item" v-for="item in shop.items" v-on:click="viewItem(item)">
                    <div class="bg bg-cover" :style="{'background-image':'url('+item.thumb+')'}"></div>
                </div>
            </div>
        </div>
    </div>
@stop

@section('foot')
    <script type="text/javascript">
        (function () {
            var offset = 0;
            var isLoading = false;
            var loadMoreAble = false;
            var loadDatasource = function (callback) {
                isLoading = true;
                $.ajax({
                    url:'/mobile/shop/getjson',
                    data:{offset:offset, count:10},
                    success:function (response) {
                        isLoading = false;
                        loadMoreAble = response.items.length === 10;
                        if (callback) callback(response);
                    }
                });
            };
            var vm = new Vue({
                el:'#app',
                data:{
                    shops:[]
                },
                mounted:function () {
                    var self = this;
                    loadDatasource(function (response) {
                        self.shops = self.shops.concat(response.items);
                    });
                },
                methods:{
                    viewShop:function (shop) {
                        window.location.href = shop.url;
                    },
                    viewItem:function (item) {
                        window.location.href = item.url;
                    }
                }
            });
            onDocumentReachBottom(function () {
                if (isLoading) return;
                if (!loadMoreAble) return;
                offset+= 10;
                loadDatasource(function (response) {
                    vm.shops = vm.shops.concat(response.items);
                });
            });
        })();
    </script>
@stop
